{%extends "./layout.html"%} {%block main%}
<style>
	#box {
		background: #f7f7f7;
		padding: 30px;
	}
	
	h6 {
		font-weight: bold;
		display: block;
		margin-bottom: 15px;
		margin-top: 15px;
	}
</style>

<div id=box class='_panel' style='padding:30px !important'>
	<div class="layui-row">
		<div class="layui-col-md6">
			<p>
				选择统计时间
			</p>

			<select class="layui-input" name="time" id="" style="margin-top: 20px;" v-model="sel">
				<option value="yestoday">昨天</option>
				<option value="last7days">最近7天</option>
				<option value="last15days">最近15天</option>
				<option value="lastmonth">最近1个月</option>
				<option value="custom">自定义时间</option>
			</select>

		</div>
	</div>
	<div class="layui-row" style="margin-top: 20px;display: none;" id=custom>
		<div class="layui-col-md3" style='padding-right: 10px;'>
			<h6>开始日期</h6>
			<input type="text" readonly="" class="layui-input" id=start_time placeholder='开始时间'/>
		</div>

		<div class="layui-col-md3" style='padding-right: 10px;'>
			<h6>开始日期</h6>
			<input type="text" readonly="" class="layui-input" id='end_time' placeholder='结束时间'/>
		</div>
	</div>

	<div style="margin-top:20px;">
		<a href="javascript:;" onclick='goDownload(this)' target="_blank" class="layui-btn">下载</a>
	</div>

</div>

{%endblock%} {%block js%}
<script>
	layui.use(["form", 'laydate'], function(form, laydate) {
		laydate.render({
			elem: "#start_time"
		});

		laydate.render({
			elem: "#end_time"
		})

		$('[name=time]').change(function() {
			if(this.value == 'custom') {
				$('#custom').show();
			} else {
				$('#custom').hide();
			}
		}).trigger('change');

	});


	function goDownload(t){
		var type = $('[name=time]').val();
		if(type == 'custom'){
			var start_time = $('#start_time').val(),
				end_time = $('#end_time').val()
			$(t).attr('href','/proxy/download/chengjiao?type=custom&start_time=' + start_time + '&end_time=' + end_time);
		}
		else{
			$(t).attr('href','/proxy/download/chengjiao?type=' + type);
		}
	}
</script>
{%endblock%}